<template>
  <right-template :title="componentData.title" :tabName="componentData.tabName">
    <el-form class="right-bg margin-bottom-10">
      <p class="margin-16">背景图片</p>
      <add-img-con :url="commonAttr.bgUrl" comAttr="commonAttr" picAttr="bgUrl" :isCrop='false' :height="100" class="margin-left-right-16"></add-img-con>
      <dropdown-normal v-model="commonAttr.bgPositionRepeatType" :valLists="BG_POSITION_REPEAT_TYPES" label="背景图片位置" @change="onChangeAttr"></dropdown-normal>
      <color-normal v-model="commonAttr.backgroundColor" label="背景颜色" :format="'rgb'" @change="onChangeAttr"></color-normal>
      <switch-normal v-model="commonAttr.isFullScreen" label="全屏" @change="onChangeAttr"></switch-normal>
      <switch-normal v-model="commonAttr.isTouchmove" label="滑动事件" @change="onChangeAttr"></switch-normal>
      <switch-normal v-model="commonAttr.isBlank" label="空的容器" @change="onChangeAttr"></switch-normal>
      <textarea-normal label="雪碧图属性" placeholder="{url,width,height,duration,steps,currentStep,isLoop}" v-model="commonAttr.spriteSheetParams" @change="onChangeAttr"></textarea-normal>
    </el-form>
  </right-template>
</template>

<script>
import RightTemplate from '@/views/child/right/right-template.vue'

import ColorNormal from '@/views/components/edit/ColorNormal.vue'
import DropdownNormal from '@/views/components/edit/DropdownNormal.vue'
import SliderNormal from '@/views/components/edit/SliderNormal.vue'
import SwitchNormal from '@/views/components/edit/SwitchNormal.vue'
import InputNormal from '@/views/components/edit/InputNormal.vue'
import TextareaNormal from '@/views/components/edit/TextareaNormal.vue'
import AddImgCon from '@/views/components/add-img-con.vue'

import { editUtils } from '@/views/js/edit-utils'
import { BG_POSITION_REPEAT_TYPES } from '@/common/const'

export default {
  name: "RightBg",
  mixins: [editUtils],
  setup () {
    return {
      BG_POSITION_REPEAT_TYPES: BG_POSITION_REPEAT_TYPES,
    }
  },
  components: {
    RightTemplate,
    ColorNormal,
    DropdownNormal,
    SliderNormal,
    SwitchNormal,
    InputNormal,
    TextareaNormal,
    AddImgCon,
  },
};
</script>
